<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link href="http://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" rel="stylesheet">
    <style>
        .login-form{
            position: absolute;
            top:100px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            transform: translateX(-50%);
            width: 300px;
            height:200px;
            padding:30px;
            -webkit-box-shadow: 5px 5px 30px -5px rgba(30,30,30,.7);
            -moz-box-shadow: 5px 5px 30px -5px rgba(30,30,30,.7);
            box-shadow: 5px 5px 30px -5px rgba(30,30,30,.7);
        }
        .login-form input{
            width: 100%;
            font-size: 1.5em;
            margin:5px;
        }
        .login-form button{
            position: absolute;
            margin-right: 30px;
            font-size: 1.2em;
            padding:5px 20px;
            right:0;
        }
    </style>
</head>
<body>
    <div class="login">
        <form action="" class="login-form">
            <input type="text" name="userName" placeholder="用户名">
            <input type="password" name="password" placeholder="密码">
            <button type="button" onclick="login()">登录</button>
        </form>
    </div>
    <script>
        $(function () {

        })

        function login() {
            var userName=$('.login-form input[name="userName"]').val();
            var password=$('.login-form input[name="password"]').val();
            if(userName!==null && userName!==undefined && userName.trim()!==''
                &&password!==null && password!==undefined && password.trim()!==''){
                $.post(
                    "/user/doLogin",
                    $('.login-form').serialize(),
                    function (data) {
                        if(data.status){
                            location.href="/";
                        }else{
                            swal("登录失败","请重新输入","error")
                        }
                    }
                );
            }else{
                swal("输入有误","用户名和密码不能为空！","warning")
            }
        }
    </script>
</body>
</html>